{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}
{% block title %}{% trans "Interface" %}{% endblock %}
{% block content %}
    {% include 'sidebar.html' %}
    <div class="main col-xs-12 col-sm-9">
        {% if errors %}
            {% for error in errors %}
                <div class="alert alert-danger">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    {{ error }}
                </div>
            {% endfor %}
        {% endif %}
        <div class="btn-group-sm">
            <a href="#AddInterface" class="btn btn-success" data-toggle="modal">{% trans "New Interface" %}</a>
        </div>
        {% if ifaces_all %}
            <div class="row" role="main">
            {% for iface in ifaces_all %}
                <div class="col-xs-12 col-sm-4">
                    <div class="panel {% ifequal iface.state 1 %}panel-success{% else %}panel-danger{% endifequal %} panel-data">
                        <div class="panel-heading">
                            <h3 class="panel-title"><a href="{% url 'interface' host_id iface.name %}">{{ iface.name }}</a>
                            </h3>
                        </div>
                        <div class="panel-body">
                            <p>{% trans "Type" %}: {{ iface.type }}</p>

                            <p>{% trans "MAC" %}: {{ iface.mac }}</p>
                        </div>
                    </div>
                </div>
            {% endfor %}
            </div>
        {% endif %}
    </div>

    <!-- Modal Secret -->
    <div class="modal fade" id="AddInterface" tabindex="-1" role="dialog" aria-labelledby="AddInterface"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">{% trans "Create New Interface" %}</h4>
                </div>
                <div class="tab-content">
                    <form class="form-horizontal" method="post" action="" role="form">{% csrf_token %}
                        <div class="form-group">
                            <label class="col-sm-3 control-label">{% trans "Name" %}</label>

                            <div class="col-sm-6">
                                <input type="text" name="name" class="form-control" placeholder="br0" maxlength="10"
                                       required pattern="[a-z0-9\.\:]+"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">{% trans "Start mode" %}</label>

                            <div class="col-sm-6">
                                <select name="start_mode" class="form-control">
                                    <option value="none">{% trans "none" %}</option>
                                    <option value="onboot">{% trans "onboot" %}</option>
                                    <option value="hotplug">{% trans "hotplug" %}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">{% trans "Device" %}</label>

                            <div class="col-sm-6">
                                <select name="netdev" class="form-control">
                                    {% for dev in netdevs %}
                                        <option value="{{ dev }}">{{ dev }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">{% trans "Type" %}</label>

                            <div class="col-sm-6">
                                <select name="itype" class="form-control" id="itype">
                                    <option value="bridge">{% trans "bridge" %}</option>
                                    <option value="ethernet">{% trans "ethernet" %}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group bridge_name_form_group">
                            <label class="col-sm-3 control-label">{% trans "STP" %}</label>

                            <div class="col-sm-6">
                                <select name="stp" class="form-control">
                                    <option value="on">{% trans "on" %}</option>
                                    <option value="off">{% trans "off" %}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group bridge_name_form_group">
                            <label class="col-sm-3 control-label">{% trans "Delay" %}</label>

                            <div class="col-sm-6">
                                <input type="text" name="delay" class="form-control" value="0" maxlength="3" required
                                       pattern="[0-9]+"/>
                            </div>
                        </div>
                        <div class="tabbable">
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#1" data-toggle="tab">{% trans "IPv4" %}</a>
                                </li>
                                <li><a href="#2" data-toggle="tab">{% trans "IPv6" %}</a></li>
                            </ul>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane active" id="1">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">{% trans "IPv4 Mode" %}</label>

                                    <div class="col-sm-6">
                                        <select name="ipv4_type" class="form-control" id="ipv4">
                                            <option value="dhcp">{% trans "DHCP" %}</option>
                                            <option value="static">{% trans "Static" %}</option>
                                            <option value="none">{% trans "No configuration" %}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group static_ipv4_form_group">
                                    <label class="col-sm-3 control-label">{% trans "IPv4 Address" %}</label>

                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="ipv4_addr" maxlength="19"
                                               pattern="[0-9\.\/]+">
                                    </div>
                                </div>
                                <div class="form-group static_ipv4_form_group">
                                    <label class="col-sm-3 control-label">{% trans "IPv4 Gateway" %}</label>

                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="ipv4_gw" maxlength="16"
                                               pattern="[0-9\.]+">
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="2">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">{% trans "IPv6 Mode" %}</label>

                                    <div class="col-sm-6">
                                        <select name="ipv6_type" class="form-control" id="ipv6">
                                            <option value="none">{% trans "No configuration" %}</option>
                                            <option value="dhcp">{% trans "DHCP" %}</option>
                                            <option value="static">{% trans "Static" %}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group static_ipv6_form_group">
                                    <label class="col-sm-3 control-label">{% trans "IPv6 Address" %}</label>

                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="ipv6_addr" maxlength="100"
                                               pattern="[0-9a-f\:\/]+">
                                    </div>
                                </div>
                                <div class="form-group static_ipv6_form_group">
                                    <label class="col-sm-3 control-label">{% trans "IPv6 Gateway" %}</label>

                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="ipv6_gw" maxlength="100"
                                               pattern="[0-9a-f\:]+">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">{% trans "Close" %}</button>
                            <button type="submit" class="btn btn-primary" name="create">{% trans "Create" %}</button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div><!-- /.modal -->
    {% include 'sidebar_close.html' %}
{% endblock %}
{% block script %}
    <script>
        $(document).ready(function () {
            $('#itype').change(function (eventObject) {
                if ($(this).val() == 'bridge') {
                    $('.bridge_name_form_group').show();
                } else {
                    $('.bridge_name_form_group').hide();
                }
            }).change();
            $('#ipv4').change(function (eventObject) {
                if ($(this).val() == 'static') {
                    $('.static_ipv4_form_group').show();
                } else {
                    $('.static_ipv4_form_group').hide();
                }
            }).change();
            $('#ipv6').change(function (eventObject) {
                if ($(this).val() == 'static') {
                    $('.static_ipv6_form_group').show();
                } else {
                    $('.static_ipv6_form_group').hide();
                }
            }).change();
        });
    </script>
{% endblock %}
